<template>
	<div class="common-layout">
	  <el-form :inline="true" :model="menuSearch" label-width="70px" style="min-width: 1200px;" class='searchForm'>
		<el-form-item label="菜单名称">
		<el-input v-model="menuSearch.name" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item label="菜单等级">
		<el-select
				v-model="menuSearch.level"
				placeholder="请选择"
				clearable
			  >
				<el-option v-for="menu_obj in menu_level" :label='menu_obj.name' :value="menu_obj.id" />
		</el-select>
		</el-form-item>
		<el-form-item label="父菜单" >
			<el-select
				v-model="menuSearch.parent"
				placeholder="请选择"
				filterable
				clearable
				  >
					<el-option v-for="main_menu in mainMenu" :label='main_menu.name' :value="main_menu.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="菜单图标">
		  <el-input v-model="menuSearch.icon" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item label="菜单路径">
			  <el-input v-model="menuSearch.path" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item>
		<el-button type="primary" @click="reset">重置</el-button>
		<el-button type="primary" @click="search">搜索</el-button>
		</el-form-item>
	  </el-form>
	  <el-dialog v-model="editDialogVisible" :title="title" style="width: 400px;" class='dialog'>
		  <el-form :model="menuSave" label-position='right'>
			<el-form-item label="菜单名称">
			  <el-input v-model="menuSave.name" autocomplete="off" placeholder="请输入"/>
			</el-form-item>
		  <el-form-item label="菜单等级">
			<el-select
					v-model="menuSave.level"
					placeholder="请选择"
					clearable
				  >
					<el-option v-for="menu_obj in menu_level" :label='menu_obj.name' :value="menu_obj.id" />
			</el-select>
		  </el-form-item>
		  <el-form-item label="菜单图标">
			<el-input v-model="menuSave.icon" autocomplete="off" placeholder="请输入"/>
		  </el-form-item>
		  <el-form-item label="菜单路径">
			<el-input v-model="menuSave.path" autocomplete="off" placeholder="请输入"/>
		  </el-form-item>
		  <el-form-item label="父菜单名" >
				<el-select v-if='menuSave.level === 1'
					v-model="menuSave.parent"
					placeholder="请选择"
					filterable
					disabled
					clearable
					  >
						<el-option v-for="main_menu in mainMenu" :label='main_menu.name' :value="main_menu.id" />
				</el-select>
				<el-select v-else
					v-model="menuSave.parent"
					placeholder="请选择"
					filterable
					clearable
					  >
						<el-option v-for="main_menu in mainMenu" :label='main_menu.name' :value="main_menu.id" />
				</el-select>
		  </el-form-item>
		  </el-form>
		  <template #footer>
			<span class="dialog-footer">
			  <el-button @click="editDialogVisible = false">取消</el-button>
			  <el-button type="primary" @click="save">
				确认
			  </el-button>
			</span>
		  </template>
	  </el-dialog>
	  <el-table :data="menu_list" class='table'>
		<el-table-column label="序号" width="70" type="index"/>
		<el-table-column label="菜单名称" prop="name" min-width="100"/>
		<el-table-column label="菜单路径" prop="path" min-width="100"/>
		<el-table-column label="菜单图标" prop="icon" min-width="100"/>
		<el-table-column label="菜单等级" prop="level" min-width="100" :formatter="formatterLevel"/>
		<el-table-column label="创建人" prop="create_by_name"  min-width="150"/>
		<el-table-column label="更新人" prop="update_by_name"  min-width="150"/>
		<el-table-column label="创建时间" prop="create_time" sortable min-width="150"/>
		<el-table-column label="更新时间" prop="update_time" sortable min-width="150"/>
		<el-table-column align="center" min-width="180">
			<template #header>
			<el-button v-if='permission.has_add_permission' type='primary' @click="addMenu">新增</el-button>
			</template>
			<template #default="scope">
			  <el-button v-if='permission.has_edit_permission' :icon="Edit" size="small" type='primary' @click="editMenu(scope.row)">编辑</el-button
			  >
			  <el-button v-if='permission.has_delete_permission'
				@click="deletePermission(scope.row.id)"
				size="small"
				type="danger"
			  :icon="Delete"
				>删除</el-button
			  >
			</template>
		</el-table-column>
	  </el-table>
	</div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen} from '@element-plus/icons-vue'

export default{
	computed: {
		...mapState(['pathPermission']),
		mainMenu: function() {
			return this.menu_list.filter((item)=>{
				return item.level === 1
			})
		}
	},
	data() {
		return {
			permission: '',
			title: '编辑菜单权限',
			editDialogVisible: false,
			menu_level: [
				{name: '主菜单', id: 1},
				{name: '子菜单', id: 2}
				
			],
			menu_list: [],
			ViewVisible: false,
			menuSearch: {
				name: '',
				path: '',
				icon: '',
				parent: '',
				level:''
			},
			menuSave: {
				id: '',
				name: '',
				path: '',
				icon: '',
				parent: 0,
				level:''
			},
		}
	},
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
		}
	},
	methods:{
		...mapActions(['getRolePermission']),
		formatterLevel(row, column, cellValue, index){
			if (row.level === 1)
				return '主菜单'
			else{
				return '子菜单'
			}
		},
		search(){
			this.getPermssions()
		},
		reset(){
			for(let key in this.menuSearch){
				this.menuSearch[key] = ''
			}
		},
		editMenu(row_data){
			this.editDialogVisible = true
			this.menuSave = {...row_data}
			
		},
		addMenu(){
			this.title = '新增菜单权限'
			this.editDialogVisible = true
		},
		save(){
			this.editDialogVisible = false
			if (this.menuSave.id){
				this.updatePermission()
			}else{
				this.createPermission()
			}
		},
		async createPermission(params){
			const response = await this.$api.createPermission(this.menuSave)
			if(response.status === 201){
				this.getPermssions()
			}
		},
		async updatePermission(){
			const response = await this.$api.updatePermission(this.menuSave.id, this.menuSave)
			if(response.status === 200){
				this.menuSave = {}
				this.getPermssions()
			}
		},
		async deletePermission(id){
			const response = await this.$api.deletePermission(id)
			if (response.status === 204){
				this.getPermssions()
			}
		},
		async getInterfaces(){
				const response = await this.$api.getInterfaces({project: this.projectInfo.id})
			    if (response.status === 200){
					this.interfaces = response.data
			    }
		},
		async getPermssions(){
				  const response = await this.$api.getPermissions(Object.assign(this.menuSearch, {back_list: true}))
				  if (response.status === 200){
					  this.menu_list = response.data.results
				  }
		}
	},
	created() {
		this.getRolePermission(this.pathPermission[this.$route.path]).then(res =>{
			this.permission = {...res.result}
		})
		this.getPermssions()
	}
}
</script>

<style scoped>
	.common-layout{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.searchForm{
		width: 100%;
		flex: 1;
		background-color: white;
		padding: 15px 15px 0 15px;
		margin-bottom: 5px;
	}
	.el-form--inline .el-form-item{
		margin-bottom: 15px;
	}
	.table{
		background-color: white;
		flex: 1;
	}
	.searchForm .el-input{
		width: 150px;
	}
	.searchForm .el-select{
		width: 150px;
	}
	.dialog .form{
		width: 400px;
		margin: 10px auto;
		
	}
	.dialog .el-select{
		width: 400px;
	}
	.form .el-select{
		width: 300px;
	}
	.el-button{
		width: 70px;
	}
	.el-icon{
		margin-left: 10px;
	}
	
</style>
